<template>
    <div>
      <header class="fix">
        <a href="javascript:history.go(-1);" class="returnBtn"></a>
        会员中心
        <a href="#" class="shareBtn"></a>
      </header>
      <!--头部 结束-->
      <!--中间 开始-->
      <main>
        <div class="memberCenterMain">
          <div class="memberInfo">
            <div class="memberName">
              <div class="memberNameLeft">
                <em></em>
                <div class="leftHead"><img src="../../images/temporary/7.jpg"></div>
              </div>
              <div class="memberNameRight">
                <span>李宗森</span>
                <em>ID:1285324061</em>
              </div>
            </div>
            <div class="carouseContent">
              <div id="carouselMain">
                <div class="tempWrap">
                  <ul class="img">
                    <li>
                      <a href="#">
                        <img src="../../images/threeLevel/memberPic.png">
                        <div class="exTitle">
                          <span>会员更省钱</span>
                          <h3>购物平均85折</h3>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <img src="../../images/threeLevel/memberPic.png">
                        <div class="exTitle">
                          <span>会员更省钱</span>
                          <h3>购物平均85折</h3>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="carouselBtn">
                  <ul>
                    <li class="on">1</li>
                    <li>2</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="discount">
            <div class="memberTitle">
              <em></em>
              <span>奢品大牌钜惠</span>
            </div>
            <div class="memberDatil">
              <a href="#" class="propagendaBanner">
                <img src="../../images/temporary/3.jpg">
                <div class="picTitle">
                  <h3>清洁肌肤</h3>
                  <span>护肤第一步</span>
                </div>
                <em class="triangle"></em>
              </a>
              <div class="swiper-container3 propagandaList">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <a href="#">
                      <div class="listPics">
                        <img src="../../images/temporary/commodity9.png">
                      </div>
                      <h4>【金晨同款】KOEHL晶彩【金晨同款】KOEHL晶彩</h4>
                      <div class="priceIng">
                        <span class="newPrice">￥<em>140</em>.06</span>
                        <span class="membership">会员价</span>
                      </div>
                    </a>
                  </div>
                  <div class="swiper-slide">
                    <a href="#">
                      <div class="listPics">
                        <img src="../../images/temporary/commodity9.png">
                      </div>
                      <h4>【金晨同款】KOEHL晶彩【金晨同款】KOEHL晶彩</h4>
                      <div class="priceIng">
                        <span class="newPrice">￥<em>140</em>.06</span>
                        <span class="membership">会员价</span>
                      </div>
                    </a>
                  </div>
                  <div class="swiper-slide">
                    <a href="#">
                      <div class="listPics">
                        <img src="../../images/temporary/commodity9.png">
                      </div>
                      <h4>【金晨同款】KOEHL晶彩【金晨同款】KOEHL晶彩</h4>
                      <div class="priceIng">
                        <span class="newPrice">￥<em>140</em>.06</span>
                        <span class="membership">会员价</span>
                      </div>
                    </a>
                  </div>
                  <div class="swiper-slide">
                    <a href="#">
                      <div class="listPics">
                        <img src="../../images/temporary/commodity9.png">
                      </div>
                      <h4>【金晨同款】KOEHL晶彩【金晨同款】KOEHL晶彩</h4>
                      <div class="priceIng">
                        <span class="newPrice">￥<em>140</em>.06</span>
                        <span class="membership">会员价</span>
                      </div>
                    </a>
                  </div>
                  <div class="swiper-slide">
                    <a href="#">
                      <div class="listPics">
                        <img src="../../images/temporary/commodity9.png">
                      </div>
                      <h4>【金晨同款】KOEHL晶彩【金晨同款】KOEHL晶彩</h4>
                      <div class="priceIng">
                        <span class="newPrice">￥<em>140</em>.06</span>
                        <span class="membership">会员价</span>
                      </div>
                    </a>
                  </div>
                  <div class="swiper-slide">
                    <a href="#">
                      <div class="listPics">
                        <img src="../../images/temporary/commodity9.png">
                      </div>
                      <h4>【金晨同款】KOEHL晶彩【金晨同款】KOEHL晶彩</h4>
                      <div class="priceIng">
                        <span class="newPrice">￥<em>140</em>.06</span>
                        <span class="membership">会员价</span>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <p class="toUpdate">每日更新</p>
          </div>
          <div class="selectionMembers">
            <div class="memberTitle">
              <em></em>
              <span>会员精选</span>
            </div>
            <div class="memberList">
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <div class="otherBg">
                  <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                  <div class="price">
                    <span class="presentNum">￥<em>19</em>.9</span>
                    <em class="member">会员价</em>
                    <span class="save">省<em>10.00</em>元</span>
                  </div>
                </div>
              </a>
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <div class="otherBg">
                  <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                  <div class="price">
                    <span class="presentNum">￥<em>19</em>.9</span>
                    <em class="member">会员价</em>
                    <span class="save">省<em>10.00</em>元</span>
                  </div>
                </div>
              </a>
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <div class="otherBg">
                  <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                  <div class="price">
                    <span class="presentNum">￥<em>19</em>.9</span>
                    <em class="member">会员价</em>
                    <span class="save">省<em>10.00</em>元</span>
                  </div>
                </div>
              </a>
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <div class="otherBg">
                  <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                  <div class="price">
                    <span class="presentNum">￥<em>19</em>.9</span>
                    <em class="member">会员价</em>
                    <span class="save">省<em>10.00</em>元</span>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </main>
    </div>
</template>

<script>
  import {TouchSlide} from "../../js/plugins/TouchSlide.1.1.min";
  import Swiper from 'swiper'
    export default {
        name: "memberCenter",
      methods:{
        /*会员中心下面的滑动列表*/
        memberDatil:function (){
    var swiper1 = new Swiper('.swiper-container3', {
      slidesPerView: 3.5,
      pagination: {
        el: '.swiper-pagination3',
        clickable: true,
      },
    });
  },
        /*轮播图*/
  bannerFocusImg: function () {
    TouchSlide({
      slideCell: "#carouselMain",
      titCell: ".carouselBtn ul",
      mainCell: ".img",
      effect: "leftLoop",
      autoPlay: true,
      autoPage: true,
      interTime: 3000
    });
    var width = $(window).width();
    var height = parseInt(width / 3 * 2);
    $("#carouselMain li a").css("max-height", height);
  },
      },
      mounted:function () {
          this.bannerFocusImg();
        this.memberDatil();
      }
    }
</script>

<style scoped>
@import "../../css/plugins/swiper.min.css";
@import "../../css/common/common.css";
@import "../../css/other/personalCenter.css";
</style>
